<template>
  <div class='login'>
    <!-- 导航栏 -->
    <van-nav-bar
      title="用户登陆"
    />

    <!-- 输入框 -->
    <van-cell-group>
      <van-field
      label="手机号"
      required
      :error-message="mobile_errmsg"
      v-model.trim="mobile"
      placeholder="请输入手机号" />
    </van-cell-group>
    <van-cell-group>
      <van-field
      label="密码"
      required
      :error-message="code_errmsg"
      v-model.trim="code"
      type="password"
      placeholder="请输入密码" />
    </van-cell-group>

    <!-- 登陆按钮 -->
    <div class="btn-wrap">
      <van-button type="info" class="btn" @click="hLogin">登陆</van-button>
    </div>
  </div>
</template>

<script>
// es6按需导入
import { login, getProfile } from '@/api/user.js'
export default {
  name: 'Login',
  data () {
    // 登陆必须要调用接口，并要传入参数,由于后端接口中需要参数名是mobile，code
    // 所以，我们这里也写一样的名字。
    return {
      // mobile: '13912345678',
      mobile: '13922222222',
      code: '246810',

      mobile_errmsg: '', // 错误提示
      code_errmsg: ''
    }
  },
  methods: {
    // 有效性验证
    // todo: 查考这里https://youzan.github.io/vant/#/zh-CN/form#xiao-yan-gui-ze
    // 用vant 自带的form验证功能来做校验
    validate () {
      // 如果验证通过就返回true,否则就返回false
      if (this.mobile === '') {
        // todo: 是否是合法手机号
        this.mobile_errmsg = '哥，手机号得写啊'
        return false
      } else {
        this.mobile_errmsg = ''
      }

      if (this.code === '') {
        this.code_errmsg = '哥，验证码得写啊'
        return false
      } else {
        this.code_errmsg = ''
      }
      return true
    },
    hTest () {
      getProfile()
    },
    async hLogin () {
      // 尝试去调用一下获取用户的个人资料
      // getProfile()

      // 1. 验证数据的有效性
      // 如果没有通过验证，就return
      if (!this.validate()) {
        alert('验证不通过')
        return
      }

      // 显示登陆中,loadin...
      // $toast不是vue自带的功能，是由vant组件库提供的
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭
        overlay: true, // 整体添加一个遮罩
        message: '登陆中...'
      })

      // 2. 向接口发请求，传递参数
      //  1)引入axios 2)根据接口要求，调用axios
      try {
        const result = await login(this.mobile, this.code)

        // 一个页面上只有一个toast，它会把上面的Loading状态覆盖掉
        // 它自已是3秒之后消失
        this.$toast.success('登陆成功')
        // 3. 根据接口返回值，做后续处理
        // 登陆成功：1） 保存token到vuex
        // 如何在组件中调用mutations?
        this.$store.commit('mSetTokenInfo', result.data.data)
        // console.log(result)

        // 登陆成功
        const backto = this.$route.query.backto || '/'
        this.$router.push(backto)
      } catch (err) {
        this.$toast.fail('登陆失败')
      }
    }
  }
}
</script>

<style scoped lang='less'>
// 设置登陆按钮的样式
.login {
  // 让登陆按钮居中
  .btn-wrap {
    padding:20px;
    .btn {
      width: 100%;
      background-color: #6db4fb;
      color: #fff;
    }
  }
}
</style>
